<template>
  <div>
    <h1>App根组件</h1>
    <hr>
    <my-table :data = "goodslist">
      <template #header>
        <th>序号</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>

      <template #body="{row, index}">
        <td>{{index + 1}}</td>
        <td>{{row.goods_name}}</td>
        <td>￥{{row.goods_price}}</td>
        <td>
          <input type="text" class="form-control form-control-sm form-ipt" v-if="row.inputVisiable" v-focus v-model.trim="row.inputValue" @blur="onInputConfirm(row)" @keyup.enter="onInputConfirm(row)" @keyup.esc="row.inputValue= ''">
          <button type="button" class="btn btn-primary btn-sm" v-else @click="row.inputVisiable = true">+Tag</button>
          <!-- 循环渲染标签信息 -->
          <span class="badge badge-warning ml-2" v-for="item in row.tags" :key="item">{{item}}</span>
        </td>
        <td>
          <button type="button" class="btn btn-danger btn-sm" @click="onRemove(row.id)">删除</button>
        </td>
      </template>
    </my-table>
  </div>
</template>

<script>
import MyTable from './components/my-table/MyTable.vue'

export default {
  
  name:'MyApp',
  data(){
    return{
      // 商品列表的数据
      goodslist:[]
    }
  },
  components:{
    MyTable,
  },
  created(){
    // 发起请求
    this.getGoodsList()
  },
  directives:{
    focus(el){
      el.focus()
    }
  },
  methods:{
    async getGoodsList(){
     const {data: res} = await this.$http.get('/api/goods')
    //  判断商品列表数据是否获取成功
     if(res.status !== 0) return alert('获取商品列表数据失败')
    //  将商品列表数据赋值给goodslist数组
     this.goodslist = res.data
    },
    // 根据id删除商品
    onRemove(id){
      this.goodslist = this.goodslist.filter( x => x.id !== id)
    },
    onInputConfirm(row){
      // 存储输入框的表单值
      const val = row.inputValue
      // 清空输入框
      row.inputValue = ''
      // 将输入框隐藏
      row.inputVisiable = false
      // 判断标签值是否为空，或是已存在
      if(!val || row.tags.indexOf(val) !== -1) return
      row.tags.push(val)
    }
  }
}
</script>

<style lang='less' scoped>
.form-ipt{ 
  width: 80px;
  display: inline;
}
</style>